<template>
    <div class="vo-drag-position-materials">
        <vueDraggable
            v-model="list"
            :group="{
                name: 'drag-position',
                pull: 'clone',
                put: false
            }"
            :clone="cloneDog"
        >
            <div class="material" v-for="(item, index) in list" :key="index" :style="{
                width: item.width + 'px',
                height: item.height + 'px'
            }">
                {{item.name}}
            </div>
        </vueDraggable>
    </div>
</template>

<script>
import VueDraggable from 'vuedraggable'
export default {
    name: 'VoDragPositionMaterials',
    components: {
        VueDraggable
    },
    data() {
        return {
            list: [
                {
                    name: '素材1',
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    fixedTop: 0,
                    fixedLeft: 0,
                    props: {
                        overstep: true,
                        minResizeWidth: 50,
                        minResizeHeight: 50,
                        maxResizeWidth: 200,
                        maxResizeHeight: 200
                    },
                    children: []
                },
                {
                    name: '素材2',
                    width: 100,
                    height: 100,
                    top: 0,
                    left: 0,
                    fixedTop: 0,
                    fixedLeft: 0,
                    props: {
                        overstep: true,
                        minResizeWidth: 50,
                        minResizeHeight: 50,
                        maxResizeWidth: 200,
                        maxResizeHeight: 200
                    },
                    children: []
                }
            ]
        }
    },
    methods: {
        cloneDog(e) {
            return Object.assign({}, { ...e })
        }
    }
}
</script>

<style lang="scss" scoped>
.vo-drag-position-materials{
    width: 400px;
    .material{
        display: inline-block;
        border-radius: 4px;
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
        cursor: move;
    }
}
</style>
